<template>
  <div>
      <div class="search_input_text">
          <input type="text" placeholder="   回车搜索商品" class="input">
      </div>
      <div class="search_con">
          <div class="search_left">
              <ul class="search_left_ul">
                  <li @click="onClickSuoyou">所有分类</li>
                  <li @click="onClickJujia">居家</li>
                  <li @click="onClickPeishi">配件装饰</li>
                  <li @click="onClickFushi">服装</li>
                  <li @click="onClickDianqi">电器</li>
              </ul>
          </div>
          <div class="search_right">
              <div class="search_right_swipe">
                  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                    <van-swipe-item>
                        <img src="http://39.105.231.166:7002/static/img/微信图片_20191013183855.c78e2c4.jpg" alt="" class="img_weixin">
                    </van-swipe-item>
                    <van-swipe-item>
                        <img src="http://39.105.231.166:7002/static/img/微信图片_20191013185220.2acdd0f.jpg" alt="" class="img_weixin">
                    </van-swipe-item>
                    <van-swipe-item>
                        <img src="http://39.105.231.166:7002/static/img/微信图片_20191013185233.2dd6c9c.jpg" alt="" class="img_weixin">
                    </van-swipe-item>
                    <van-swipe-item>
                        <img src="http://39.105.231.166:7002/static/img/微信图片_20191013185236.a853d34.jpg" alt="" class="img_weixin">
                    </van-swipe-item>
                  </van-swipe>
              </div>
              <div class="rearch_routerView">
                  <router-view></router-view>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
    data(){
        return{
            list:[],
            list1:[],
            list2:[],
            list3:[],
            list4:[]
        }
    },
    mounted(){
             axios.get("https://api.it120.cc/small4/shop/goods/category/all").then(res=>{
            // console.log(res);
            this.list = res.data.data
            console.log(this.list);
        }) 
    },
    methods: {
        onClickJujia(){
            this.list1 = [];
            this.list.forEach(item=>{
                // console.log(item);
                if(item.type == "jujia" || item.type == "jujia2"){
                    this.list1.push(item)
                    localStorage.setItem("jujia",JSON.stringify(this.list1))
                }
            })
                //  console.log(this.list1);
                 this.$router.push({
                     path:"/jujia",
                     query:{
                         item:this.list1
                     }
                 })
        },
        onClickSuoyou(){
            this.$router.push("/search")
        },
        onClickPeishi(){
            this.list2 = [];
             this.list.forEach(item=>{
                // console.log(item);
                if(item.type == "peishi" || item.type == "peishi2"){
                    this.list2.push(item)
                    localStorage.setItem("peishi",JSON.stringify(this.list2))
                }
                    this.$router.push({
                     path:"/peishi",
                     query:{
                         item:this.list2
                     }
                 })
            })
        },
        onClickFushi(){
                    this.list3 = [];
             this.list.forEach(item=>{
                // console.log(item);
                if(item.type == "fuzhuang" || item.type == "fuzhuang2"){
                    this.list3.push(item)
                    localStorage.setItem("fushi",JSON.stringify(this.list3))
                }
                    this.$router.push({
                     path:"/fushi",
                     query:{
                         item:this.list3
                     }
                 })
            })
        },
        onClickDianqi(){
                      this.list4 = [];
             this.list.forEach(item=>{
                // console.log(item);
                if(item.type == "dianqi" || item.type == "dianqi2"){
                    this.list4.push(item)
                    localStorage.setItem("fushi",JSON.stringify(this.list4))
                }
                    this.$router.push({
                     path:"/dianqi",
                     query:{
                         item:this.list4
                     }
                 })
            })
        }
    },
}
</script>

<style>
.van-swipe-item
{
    width: 100%;
    height: 5rem;
}
.van-swipe-item img
{
    width: 100%;
    height: 100%;
}
/* .van-swipe-item
{
    width: 100%;
    height: 5rem;
}
.van-swipe-item img
{
    width: 100%;
    height: 100%;
} */
.search_input_text
{
    width: 100%;
    height: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid black;
}
.input
{
    width: 80%;
    height: 50%;
    border: 1px solid black;
    border-radius: 0.5rem;
    font-size: 0.5rem ;
    background: rgb(241, 240, 240);
}
.search_con
{
    width: 100%;
    height: 83vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.search_left
{
    width: 25%;
    height: 100%;
    border-right: 1px solid  black;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.search_left_ul
{
    width: 100%; 
    height: 100%;
    list-style: none;
    font-size: 0.7rem;
}
.search_left_ul li
{
    width: 100%;
    height: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

}
.search_left_ul li:hover{
    color:red;
    border-left: 2px solid  red;
}
.search_right
{
    width: 75%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    /* border-radius: 0.5rem; */
}
.search_right_swipe
{
    width: 80%;
    height: 5rem;
}
.rearch_routerView
{
    width: 80%;
    height:64vh;
    overflow: scroll;
}
/* .my-swipe
{
    width: 100%;
    height: 100%;
}  */
</style>